<template>
	<scroll :topArea="44" :bottomArea="44" ref="secondDetail"  @pullingDown="onpullingDown" @pullingUp="onpullingUp" :data="productList">
    <div class="collect-pro-content">
        <div class="collect-pro-item" v-for="p in productList" :key="p.id" @click="goDetail(p.id)">
          <div class="img-area">
            <img :src="p.imgPro" alt="图片">         
          </div>
          <div class="content-area">
            <div>[{{p.oldLevelStr}}] {{p.name}}</div>
            <div class="leasePrice"><span>¥&nbsp;</span>{{ p.leaseType == "DAILY" ? (p.displayRent/100).toFixed(2) : (p.displayRent*30/100).toFixed(2)}}<span>/ {{p.leaseType == "DAILY" ? "天" : "月"}} 起</span></div>
          </div>
          <span class="top-pic"></span>
        </div>
    </div>
  </scroll>
</template>

<script>
import blankPage from '@/components/blankPage'
import {getSecondData} from "@/api/homepage.js"
export default {
  name: "secondDetail",
  components: {
    blankPage
  },
  data: function(){
    return {
      pageSize: 10,
      pageNum: 1,
      productList: [],
      hasMore: true,
    }
  },
  methods: {
    secondData: function(){
      this.pageNum = 1;
      let id = this.$route.params.id
      getSecondData(id,this.pageNum).then( data => {
        let self = this;
        if(data.code == 200){
          if(data.data.list){
            let map = data.data.list;
              map.forEach(function(item){
                item.imgPro = item.imgUrl[0].url + '?x-oss-process=image/format,jpg/interlace,1/quality,q_90/resize,w_' + parseInt(window.innerWidth/2);
              })
              this.productList = map;
              if(data.data.list.length < this.pageSize){
                  this.hasMore = false;
              }else {
                 this.hasMore = true;
              }
          }else {
              this.hasMore = false;
          }
        }else {
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
          this.$refs.secondDetail.forceUpdate(true);
          this.hasMore = false;
        }
      })
    },
    loadMore: function(){
      if(!this.hasMore){
        this.$refs.secondDetail.forceUpdate(true);
        return
      }
      this.pageNum ++;
      let id = this.$route.params.id
      getSecondData(id,this.pageNum).then( data => {
        if(data.code == 200){
          if(data.data.list){
            if(data.data.list.length <this.pageSize){
                this.hasMore = false;
            }else {
                this.hasMore = true;
            }
            var map = data.data.list;
            map.forEach(function(item){
              item.imgPro = item.imgUrl[0].url + '?x-oss-process=image/format,jpg/interlace,1/quality,q_90/resize,w_' + parseInt(window.innerWidth/2);
            })
            this.productList = this.productList.concat(map);
          }else {
            this.$refs.secondDetail.forceUpdate(true);
            this.hasMore = false;
          }
        }else {
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
          this.$refs.secondDetail.forceUpdate(true);
          this.hasMore = false;
        }
      })
    },
    goDetail: function(id){
      this.$router.push({name:'choose' , params: {'id': id}});
    },
    onpullingDown: function(){
      this.hasMore = true;
      this.secondData();
    },
    onpullingUp: function(){
      this.loadMore();
    }
  },
  mounted: function(){
    this.secondData();
  },
  watch: {
    '$route' (to, from) {
      this.$refs.secondDetail.destroy();
      this.$refs.secondDetail.initScroll();
      this.secondData();
    }
  }
}
</script>
<style lang="scss" scoped>
  .collect-pro-content {
    background-color: #fff;
    padding: 16px;
    & .collect-pro-item {
      height: 86px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 12px;
      border: 1px solid #eee;
      border-radius: 5px;
      margin-bottom: 12px;
      & .img-area {
        width: 88px;
        height: 88px;
        background: #eee;
        margin-right: 11px;
        &>img {
          width: 100%;
          height: 100%;
        }
      }
      & .content-area { 
        width: 230px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        &>div{
          font-size: 16px;
          color: #666;
          &:first-child {
            width: 210px;
            font-size: 16px;
            line-height: 19px;
            display:block;
            white-space:nowrap; 
            overflow:hidden; 
            text-overflow:ellipsis
          }
          &.leasePrice {
            line-height: 19px;
            color: #ff4000;
            margin-top: 8px;
            &>span {
              font-size: 16px;
            }
          }
        }
      }
    }
  }
</style>